<template>
  <div class="answer">
    <HeaderTop
      :isActive="isActive"
      :data="title.length !== 0 ? title[0].title : titleTR.slice(0, 2)"
    ></HeaderTop>
    <div class="contentBox">
      <div class="datatitle">
        {{ data.title }}
      </div>
      <!-- 用户问 -->
      <div v-if="data.json_content" class="simple_author">
        {{ data.json_content.simple_author[0] }}
      </div>
      <div class="datatitlesm">
        {{ data.title }}
      </div>
      <div>
        <van-divider>·</van-divider>
      </div>
      <!-- 用户答 -->
      <div class="answerer">
        <div v-if="data.json_content">
          {{ data.json_content.simple_answerer }}
        </div>
      </div>
      <!-- 文章 -->
      <div class="contents" v-if="data.json_content">
        <div v-html="data.json_content.content"></div>
      </div>
      <!--出版及   评论 -->
      <Editor :edit="data" :comments="comments"></Editor>
    </div>

    <bottomBar :data="data"></bottomBar>
  </div>
</template>

<script>
import HeaderTop from "@/components/headerTop.vue";
import { getArticleContent, getComment } from "@/api/articlesPage";
import Editor from "@/components/editor.vue";
import bottomBar from "@/components/bottomBar.vue";
export default {
  components: { HeaderTop, Editor, bottomBar },
  name: "answer",
  data() {
    return {
      data: {},
      comments: {},
      commentId: "0",
      title: JSON.parse(this.$route.query.title),
      titleTR: decodeURIComponent(this.$route.query.titleTR),
      isActive: true,
    };
  },
  created() {
    this.getArticle();
  },
  methods: {
    //获取问答文章的内容
    async getArticle() {
      const { data } = await getArticleContent(
        this.$route.query.id,
        "question"
      );
      this.data = data;
      console.log(this.data);
      if (this.data.json_content) {
        this.getComments();
      }
    },
    async getComments() {
      // 获取阅读的评论
      const { data } = await getComment(
        this.data.json_content.type,
        this.data.id,
        this.commentId
      );
      this.comments = data;
      console.log(this.comments);
    },
  },
};
</script>

<style lang="less" scoped>
.answer {
  color: #333333;
  .contentBox {
    margin-top: 30px;
    padding: 0 15px;
    box-sizing: border-box;
    .datatitle {
      font-size: 25px;
      font-weight: 700;
      padding: 20px 0 30px 0;
    }
    .simple_author {
      font-size: 12px;
    }
    .datatitlesm {
      font-size: 18px;
      margin: 10px 0 0 0;
    }
    .answerer {
      margin-bottom: 10px;
    }
    ::v-deep .contents {
      .one-img-container {
        img {
          width: 345px;
        }
      }
      p {
        margin: 10px;
      }
    }
  }
}
</style>